<!-- 用户账单 -->
<template>
	<view class="container">
		<view class="date">
			<view @click="labelShow">
				<text>{{screen}}</text>
				<text class="cell-more yticon icon-xia"></text>
			</view>

			<view @click="datePickerShow">
				<text>{{user_time}}</text>
				<text class="cell-more yticon icon-xia"></text>
			</view>
		</view>
		<empty v-if="emptyShow" :custom="true" src="/static/images/public/no-bill.png" text="您还没有账单记录哦，快去前往消费"></empty>
		<view class="listBox">
			<view @tap="goDetail(item.id)" class="item" v-for="(item,index) in list" :key="index">
				<view>
					<text class="clamp">{{item.mark}}</text>
					<text>{{item.title}}</text>
					<text>{{item.add_time}}</text>
				</view>
				<view>
					<text>{{item.em}}{{item.number}}</text>
					<text v-if="item.status == 0&&item.em == '+'">待入账</text>
					<text v-if="item.status == -1&&item.type != 'extract'">已失效</text>
				</view>
			</view>
		</view>
		<uni-load-more class="loadMore" iconType="circle" :status="loadStatus" :contentText="contentText"></uni-load-more>
		<w-picker mode="date" :value="user_time" :current="true" fields="month" @confirm="onConfirm($event)"
		 :disabled-after="true" ref="date"></w-picker>
		<uni-popup ref="popup" type="bottom">
			<view class="screenBox">
				<text class="title">筛选状态</text>
				<view class="labelBox">
					<view @tap="chooseCategory(-1,'',0,'','')" :class="active == -1?'active':''" class="label">
						<text>全部</text>
					</view>
					<view @tap="chooseCategory(index,item.category,item.type,item.em,item.shell_id,item.title)" :class="active == index?'active':''" class="label" v-for="(item,index) in categoryList" :key="index">
						<text>{{item.title}}</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		userBill,
		billCategory
	} from "@/api/user.js"
	import wPicker from "@/components/w-picker/w-picker.vue"
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			wPicker,
			uniLoadMore,
			uniPopup
		},
		data() {
			return {
				emptyShow: false,
				categoryList: [],
				list: [],
				screen: "全部",
				active: -1,
				// 请求数据
				type: 0,
				category: '',
				shell_id: '',
				em: '',
				page: 1,
				limit: 15,
				user_time: "",

				loadStatus: "loading",
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多了"
				}
			}
		},
		onLoad(options) {
			let myDate = new Date();
			let year = myDate.getFullYear()
			let month = myDate.getMonth() + 1
			if (month < 10) {
				month = '0' + month
			}
			this.user_time = year + '-' + month
			this.getList()
			this.getCategory()
		},
		onReachBottom() {
			if (this.loadStatus == "more")
				(this.loadStatus = "loading"), this.getList();
		},
		methods: {
			getCategory() {
				billCategory().then(res => {
					this.categoryList = res.data
				})
			},
			getList() {
				userBill({
					type: this.type,
					category: this.category,
					// shell_id: this.shell_id,
					em: this.em,
					page: this.page,
					limit: this.limit,
					user_time: this.user_time,
				}).then(res => {
					this.loadStatus = "more";
					this.list.push.apply(this.list, res.data);
					if (res.data.length < this.limit) this.loadStatus = "noMore"; //判断所有数据是否加载完成；
					this.page = this.page + 1;
					if (this.list.length == 0) {
						this.emptyShow = true
						this.contentText.contentnomore = ''
					} else {
						this.emptyShow = false
						this.contentText.contentnomore = '没有更多了'
					}
				})
			},
			onConfirm(e) {
				this.loadStatus = "loading";
				this.list = []
				this.page = 1
						this.emptyShow = false
				this.user_time = e.value
				this.getList()
			},
			labelShow() {
				this.$refs.popup.open()
			},
			datePickerShow() {
				this.$refs.date.show()
			},
			chooseCategory(index,category,type,em,shell_id,title) {
				this.active = index
				this.category = category
				this.type = type
				this.em = em
				this.screen = title
				if (index == -1) {
					this.screen = "全部"
				}
				this.shell_id = shell_id
				this.loadStatus = "loading";
				this.list = []
						this.emptyShow = false
				this.page = 1
				this.$refs.popup.close()
				this.getList()
			},
			goDetail(id) {
				uni.navigateTo({
					url:"./billDetaill?id=" + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 30rpx;

		.date {
			z-index: 99;
			position: sticky;
			top: 0;
			display: flex;

			height: 60rpx;
			width: 690rpx;
			padding: 35rpx 30rpx;
			margin-left: -30rpx;
			background-color: #f5f5f5;

			view {
				margin-right: 40rpx;
				min-width: 140rpx;
				padding: 10rpx 20rpx;
				border-radius: 30rpx;
				background: rgba(255, 255, 255, 1);
				display: flex;
				align-items: center;
				justify-content: center;

				text {
					font-size: 28rpx;
					color: rgba(51, 51, 51, 1);
					line-height: 60rpx;
				}

				text:nth-of-type(1) {
					margin-right: 4rpx;
				}
			}
		}

		.listBox {
			.item {
				height: 180rpx;
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #f5f5f5;

				view {
					display: flex;
					flex-direction: column;
					justify-content: center;
				}

				view:nth-of-type(1) {
					flex: 1;
					text:nth-of-type(1) {
						width: 500rpx;
						font-size: 28rpx;
						font-weight: bold;
						color: rgba(51, 51, 51, 1);
						margin-bottom: 10rpx;
					}

					text:nth-of-type(2) {
						font-size: 20rpx;
						color: rgba(153, 153, 153, 1);
						margin-bottom: 10rpx;
					}

					text:nth-of-type(3) {
						font-size: 20rpx;
						color: rgba(153, 153, 153, 1);
					}
				}

				view:nth-of-type(2) {
					align-items: center;
					text:nth-of-type(1) {
						font-size: 28rpx;
						font-weight: bold;
						color: rgba(51, 51, 51, 1);
					}
					text:nth-of-type(2) {
						font-size: 24rpx;
						color: #FF0000;
					}
				}
			}

			.item:nth-of-type(1) {
				border-top: 1rpx solid #f5f5f5;
			}
		}
		.loadMore{
			position: relative;
			// z-index: 9;
		}
		.screenBox {
			background-color: #fff;
			padding: 0 33rpx 20rpx;
			border-radius: 10rpx 10rpx 0px 0px;

			.title {
				display: block;
				line-height: 100rpx;
				text-align: center;
				font-size: 24rpx;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
			}

			.labelBox {
				display: flex;
				flex-wrap: wrap;
				.label {
					margin: 0 29rpx 20rpx;
					width: 170rpx;
					height: 64rpx;
					line-height: 64rpx;
					border-radius: 32rpx;
					text-align: center;
					background: rgba(212, 212, 212, 1);
					font-size:20rpx;
					color:rgba(255,255,255,1);
				}
				.active{
					background-color: $theme-color;
				}
			}
		}
	}
</style>
